<template>
	<view
		class="scanCode"
		@click="countdown">
		<view
			class="status_bar_h"
			:style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image
				style="width: 100%; height: 400rpx"
				mode="aspectFill"
				:src="`${src.length > 2 ? src[2] : ''}`"></image>
		</view>
		<view class="main">
			<view class="title">ONE桌游自助繳費系統系統</view>
			<view class="sd_title">掃碼登入</view>
			<view class="form">
				<up-image
					width="174rpx"
					height="174rpx"
					:src="scanCodeImg"
					:fade="true"
					duration="450"></up-image>
			</view>
			<view class="btn_wrap">
				<view
					class="btn_box"
					@click="jump('phoneLogin')"
					>手機號登入</view
				>
			</view>
			<!-- <view class="deal">
				<checkbox-group>
					<label>
						<checkbox
							color="#39B19D"
							outline="#39B19D"
							class="deal_check"
							:checked="isChecked" />
						<text class="text">我已阅读并同意《登录协议》《隐私协议》</text>
					</label>
				</checkbox-group>
			</view> -->
		</view>
		<view class="feature">
			<custom-mask
				v-if="isMaskShow"
				@close="close">
			</custom-mask>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
import CustomMask from './components/CustomMask.vue';
export default {
	components: { CustomMask },
	data() {
		return {
			src: [],
			scanCodeImg: '', // 二维码
			baseURL,
			isChecked: false,
			disabled: false,
			changeText: '獲取驗證碼',
			form: {},
			statusBarHeight: 0, // 顶部状态栏高度
			bthHeight: 0, // 底部按钮高度
			list: [],
			scrollTop: 0,
			old: {
				scrollTop: 0,
			},
			codeTimer: null, // 扫码计时器
			isMaskShow: false, // 是否显示扫码中
		};
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		// const screenTop = uni.getSystemInfoSync().safeArea.top;
		// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
		this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
		// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
		// console.log('this.bthHeight', this.bthHeight);
		// console.log('screenTop', screenTop);
		// console.log('screenBot', screenBot);
		this.getCode();
		this.setSwiperImg();
		this.countdown();
	},
	methods: {
		countdown() {
			// countDate();
		},
		submit() {
			if (this.isChecked) {
				if (this.checkForm()) {
					const params = {
						user_name: this.form.user_name,
						user_pass: this.form.user_pass,
					};
					login(params)
						.then(res => {
							uni.showToast({
								title: '成功',
								duration: 1000,
							});
						})
						.catch(err => {
							uni.showModal({
								title: '系統提示',
								content: `登录失败，原因${err}`,
							});
						});
				} else {
					uni.showModal({
						title: '系統提示',
						content: '請檢查是否填寫',
					});
				}
			} else {
				uni.showToast({
					title: '请勾选协议',
					duration: 1000,
				});
			}
		},
		phoneChange(e) {},
		// 获取登录状态
		getLoginState() {
			clearInterval(this.codeTimer);
			const _equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			this.codeTimer = setInterval(() => {
				uni.request({
					url: baseURL + '/api/index/getLoginStatus',
					data: {
						equipmentID: _equipmentOptions.equipmentID,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					responseType: 'text',
					success: res => {
						console.log('登录状态', res.data.data);
						if (res.data.data.status === 1) {
							this.isMaskShow = false;
						}
						if (res.data.data.status === 2) {
							this.isMaskShow = true;
						}
						if (res.data.data.status === 3) {
							clearInterval(this.codeTimer);
							uni.setStorageSync('userOptions', JSON.stringify(res.data.data));
							uni.reLaunch({
								url: '/pages/shop/shop',
							});
						}
						if (res.data.data.status === 4) {
							clearInterval(this.codeTimer);
							uni.reLaunch({
								url: '/pages/scanCode/scanCode',
							});
						}
					},
					fail: error => {},
				});
			}, 1500);
		},
		getCode() {
			// 获取二维码
			const _equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			uni.request({
				url: baseURL + '/api/index/qrcode',
				data: {
					equipmentID: _equipmentOptions.equipmentID,
				},
				header: {
					Accept: 'application/json',
					'Content-Type': 'application/json',
					'X-Requested-With': 'XMLHttpRequest',
				},
				method: 'POST',
				responseType: 'arraybuffer',
				success: res => {
					// const resOptions = res.data.data;
					// console.log('res', res.data);
					// const blob = new Blob(res.data, { type: 'png' });
					// const imageUrl = (window.URL || window.webkitURL).createObjectURL(
					// 	blob
					// );
					this.scanCodeImg =
						'data:image/png;base64,' +
						window.btoa(
							new Uint8Array(res.data).reduce(
								(data, byte) => data + String.fromCharCode(byte),
								''
							)
						);
					this.getLoginState();
					// console.log('this.scanCodeImg', this.scanCodeImg);
				},
				fail: error => {},
			});
		},
		setSwiperImg() {
			const equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			// console.log('equipmentOptions', equipmentOptions.imagejh);
			const _src = equipmentOptions.imagejh
				? equipmentOptions.imagejh.split(',')
				: [];
			if (_src.length > 1) {
				this.src = _src.map(item => baseURL + item);
			} else if (_src.length === 1) {
				this.src = [baseURL + _src[0]];
			}
		},
		checkForm() {
			const { user_name, user_pass } = this.form;
			return user_name && user_pass ? true : false;
		},
		jump(data) {
			let url = '';
			switch (data) {
				case 'phoneLogin':
					url = '/pages/menu/menu';
					break;
				default:
			}
			uni.reLaunch({
				url,
			});
		},
		close() {
			this.isMaskShow = false;
			this.getCode();
		},
	},
};
</script>

<style lang="scss" scoped>
.scanCode {
	height: 100%;

	.main {
		padding: 40rpx 40rpx 0;
		text-align: center;
		color: $uni-color-green;

		.title {
			font-size: 36rpx;
		}

		.sd_title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 50rpx;
		}
		

		.form {
			position: relative;
			height: 148rpx;
			padding-bottom: 120rpx;
			display: flex;
			justify-content: center;
			align-content: center;

			.checkout_btn {
				position: absolute;
				right: 20rpx;
				bottom: 60rpx;
				font-size: 24rpx;
			}
		}

		.btn_wrap {
			display: flex;
			justify-content: space-around;

			.btn_box {
				// width: 140rpx;
				padding: 10rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #fff;
				background-color: $uni-color-green;
			}
		}

		.deal {
			padding: 80rpx 20rpx 20rpx;
			font-size: 24rpx;

			::v-deep .uni-checkbox-input {
				border-color: $uni-color-green;
				border-radius: 50%;
				vertical-align: middle;
			}

			.text {
				vertical-align: middle;
			}
		}
	}
}
</style>
